<template>
    <div class="home-page">
        <Header isShowSignUp>
            <template #logo>
                <span class="header-logo">ele.me</span>
            </template>
        </Header>

        <nav class="city-nav">
            <div class="city-tip">
                <span>当前定位城市：</span>
                <span>定位不准时，请在城市列表中选择</span>
            </div>

            <router-link :to="'/city/' + guessCityid" class="guess-city">
                <span>{{ guessCity }}</span>
                <svg class="arrow-right">
                    <use
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        xlink:href="#arrow-right"
                    ></use>
                </svg>
            </router-link>
        </nav>

        <section id="hot-city-container">
            <h4 class="city-title">热门城市</h4>
            <ul class="citylistul clear">
                <router-link
                    tag="li"
                    v-for="item in hotcity"
                    :to="'/city/' + item.id"
                    :key="item.id"
                >
                    {{ item.name }}
                </router-link>
            </ul>
        </section>

        <section class="group-city-container">
            <ul class="letter-classify">
                <li
                    v-for="(value, key, index) in sortgroupcity"
                    :key="key"
                    class="letter-classify-li"
                >
                    <h4 class="city-title">
                        {{ key }}
                        <span v-if="index == 0">（按字母排序）</span>
                    </h4>
                    <ul class="groupcity-name-container citylistul clear">
                        <router-link
                            tag="li"
                            v-for="item in value"
                            :to="'/city/' + item.id"
                            :key="item.id"
                            class="ellipsis"
                        >
                            {{ item.name }}
                        </router-link>
                    </ul>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import { fetchCity } from '@/api/city';

export default {
    data() {
        return {
            guessCity: '', //当前城市
            guessCityid: '', //当前城市id
            hotcity: [], //热门城市列表
            groupcity: {} //所有城市列表
        };
    },
    mounted() {
        this.getGuessCity();
        this.getHotCity();
        this.getGroupCity();
    },
    computed: {
        // 将获取的数据按照 A-Z 字母开头排序
        sortgroupcity() {
            let sortobj = {};
            for (let i = 65; i <= 90; i++) {
                if (this.groupcity[String.fromCharCode(i)]) {
                    sortobj[String.fromCharCode(i)] = this.groupcity[
                        String.fromCharCode(i)
                    ];
                }
            }
            return sortobj;
        }
    },
    methods: {
        async getGuessCity() {
            const res = await fetchCity('guess');
            this.guessCity = res.name;
            this.guessCityid = res.id;
        },
        async getHotCity() {
            const res = await fetchCity('hot');
            this.hotcity = res.name;
        },
        async getGroupCity() {
            const res = await fetchCity('group');
            this.groupcity = res;
        }
    }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';

.header-logo {
    left: 0.4rem;
    font-weight: 400;
    @include sc(0.7rem, #fff);
    @include wh(2.3rem, 0.7rem);
    @include ct;
}

.city-nav {
    padding-top: 2.35rem;
    border-top: 1px solid $bc;
    background-color: #fff;
    margin-bottom: 0.4rem;
    .city-tip {
        @include fj;
        line-height: 1.45rem;
        padding: 0 0.45rem;
        span:nth-of-type(1) {
            @include sc(0.55rem, #666);
        }
        span:nth-of-type(2) {
            font-weight: 900;
            @include sc(0.475rem, #9f9f9f);
        }
    }
    .guess-city {
        @include fj;
        align-items: center;
        height: 1.8rem;
        padding: 0 0.45rem;
        border-top: 1px solid $bc;
        border-bottom: 2px solid $bc;
        @include font(0.75rem, 1.8rem);
        span:nth-of-type(1) {
            color: $blue;
        }
        .arrow-right {
            @include wh(0.6rem, 0.6rem);
            fill: #999;
        }
    }
}
#hot-city-container {
    background-color: #fff;
    margin-bottom: 0.4rem;
}
.citylistul {
    li {
        float: left;
        text-align: center;
        color: $blue;
        border-bottom: 0.025rem solid $bc;
        border-right: 0.025rem solid $bc;
        @include wh(25%, 1.75rem);
        @include font(0.6rem, 1.75rem);
    }
    li:nth-of-type(4n) {
        border-right: none;
    }
}
.city-title {
    color: #666;
    font-weight: 400;
    text-indent: 0.45rem;
    border-top: 2px solid $bc;
    border-bottom: 1px solid $bc;
    @include font(0.55rem, 1.45rem, 'Helvetica Neue');
    span {
        @include sc(0.475rem, #999);
    }
}

.letter-classify-li {
    margin-bottom: 0.4rem;
    background-color: #fff;
    border-bottom: 1px solid $bc;
    .groupcity-name-container {
        li {
            color: #666;
        }
    }
}
</style>
